<template>
  <div>
    <div class="title">操作日志</div>
    <div class="search-box">
      <div class="select-box">
        <span v-for="item in select" @click="handelSelect(item.id)"
          :class="{'active':query.days==item.id?true:false}">{{item.text}}</span>
      </div>
      <el-date-picker v-model="date" @change="dateChange" type="daterange" range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <div class="box">
        <span class="label">模块：</span>
        <el-input v-model="query.content" @change="search" clearable class="input" size="small"
          prefix-icon="el-icon-search" placeholder="请选择">
        </el-input>
      </div>
    </div>
    <!-- 表格 -->
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" border>
      <el-table-column label="序号" width="80" type="index" align="center"></el-table-column>
      <el-table-column prop="account" label="员工账号" align="center">
      </el-table-column>
      <el-table-column prop="moduleOne" label="模块" align="center">
      </el-table-column>
      <el-table-column prop="moduleTwo" label="二级模块" align="center">
      </el-table-column>
      <el-table-column prop="account" label="用户账号" align="center">
      </el-table-column>
      <el-table-column prop="content" label="内容" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="operation" label="操作" align="center">
      </el-table-column>
      <el-table-column prop="operationTime" label="时间" align="center">
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <Page :total="total" :PageNumber.sync="query.pageNumber" :PageSize.sync="query.pageSize" @current-change="changeCurrentPage"
      @size-change="handleSizeChange">
    </Page>
  </div>
</template>
<script>
  import Page from "@/components/page.vue";
  import apis from "@/apis/modules/operate"
  export default {
    components: {
      Page
    },
    data() {
      return {
        select: [
          { text: '今天', id: 1 },
          { text: '近7天', id: 7 },
          { text: '近30天', id: 30 },
        ],
        date: null,//日期
        currentPage: 1,
        query: {
          days: "",//	1 7 30
          starttime: "",//	开始时间
          endtime: "",//	结束时间
          content: "",//	搜索内容
          pageNumber: 1,//当前页数
          pageSize: 10,//	每页显示多少条
        },
        total: 0,//
        tableData: [],
      };
    },
    mounted() {
      this.getOperationLog()
    },
    methods: {
      // 条件搜索
      search() {
        this.query.pageNumber = 1;
        this.getOperationLog()
      },
      // 获取操作日志列表
      async getOperationLog() {

        const { code, data, msg } = await apis.getOperationLog(this.query)

        if (code == 200) {
          this.total = data.count;
          this.tableData = data.list;
        }
      },
      // 改变日期
      dateChange(date) {
        if (date != null) {
          this.query.starttime = date[0];
          this.query.endtime = date[1];
        } else {
          this.query.starttime = "";
          this.query.endtime = "";
        }
        this.search()
      },
      // 选择天数
      handelSelect(id) {
        this.query.days = id;
        this.search()
      },
      //改变当前页数
      changeCurrentPage(val) {
        this.getOperationLog()
      },
      //改变每页显示条数
      handleSizeChange(val) {
        this.getOperationLog()
      },
    },
  };
</script>
<style lang="scss" scoped>
  .title {
    margin-bottom: 32px;
  }

  .search-box {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
  }

  .select-box {
    margin-right: 32px;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 20px;

    span {
      padding: 10px;
      cursor: pointer;

    }

    span:nth-child(1) {
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;

    }

    span:nth-child(2) {
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
    }

    span:nth-child(3) {
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;

    }

    .active {
      color: #fff;
      background: #aeaeae;

    }
  }

  .box {
    display: flex;
    align-items: center;
    margin-left: 32px;
  }

  .label {
    width: 80px;
  }
</style>